<template>
  <div class="header-detail">
    <div class="content" style="margin-bottom: 64px;">
      <!--标题-->
      <div class="title-box">
        <h1 class="title">{{ sell.name }}</h1>
      </div>
      <!--星星-->
      <div class="star-box">
        <star :score="sell.score" :size="48"></star>
      </div>
      <!--优惠信息-->
      <div class="discounts-box">
        <div class="discounts-title-box">
          <div class="title-line"></div>
          <div class="title">优惠信息</div>
          <div class="title-line"></div>
        </div>
        <div class="discounts">
          <ul>
            <li v-for="(support, index) in sell.supports" :key="index">
              <support-icon :size="2" :type="support.type"></support-icon>
              <span class="discounts-info">{{ support.description }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!--商家公告-->
      <div class="shop-box">
        <!--标题-->
        <div class="title-box">
          <div class="line"></div>
          <div class="title">商家公告</div>
          <div class="line"></div>
        </div>
        <!--公告详情-->
        <div class="shop">
          <p>
            {{ sell.bulletin }}
          </p>
        </div>
      </div>
    </div>
    <div class="close-box" @click="closeHeaderDetail">
      <i class="icon-close close"></i>
    </div>
  </div>
</template>

<script>
import SupportIcon from 'components/common/support-icon/support-icon'
import star from 'components/common/star/star'

export default {
  name: 'header-detail',
  props: {
    sell: Object
  },
  components: {
    SupportIcon,
    star
  },
  methods: {
    closeHeaderDetail () {
      this.$emit('closeHeaderDetail')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~assets/styles/mixin.styl"

.header-detail
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  color $color-white
  background-color $color-background-s
  blur: 10px
  z-index 99
  overflow auto
  height 100%
  width 100%
  display inline-block
  .title-box
    margin-top 64px
    width 100%
    .title
      text-align center
      font-size $fontsize-large
      font-weight 350
      line-height $fontsize-large
  .star-box
    margin-top 16px
  .discounts-box
    display flex
    flex-direction column
    .discounts-title-box
      width 80%
      margin 28px auto 24px
      display flex
      .title-line
        flex 1
        position relative
        top -6px
        border-bottom 1px solid $color-background-header-detail-line
      .title
        font-size $fontsize-medium
        font-weight 350
        padding 0 12px
    .discounts
      margin 0 auto 28px
      ul
        li
          height 16px
          margin-bottom 12px
          .discounts-info
            position relative
            top -3px
            font-size $fontsize-small
            line-height $fontsize-small
            font-weight 200
            padding-left 6px
  .shop-box
    display flex
    flex-direction column
    .title-box
      display flex
      flex-direction row
      width 80%
      margin 0 auto
      .title
        font-size $fontsize-medium
        line-height $fontsize-medium
        font-weight 350
        padding 0 12px
      .line
        flex 1
        position relative
        top -6px
        border-bottom 1px solid $color-background-header-detail-line
    .shop
      width 80%
      margin 0 auto
      p
        font-size $fontsize-small
        line-height $fontsize-large-x
        padding 24px 12px
  .close-box
    width: 100%
    height: 30px
    text-align center
    margin-bottom 32px
    font-size: $fontsize-large-xxxx
</style>
